const styleToTailwind = {
  display: (value) => `flex-${value === 'flex' ? '1' : 'none'}`,
  flexDirection: (value) => `flex-${value.replace('row', 'row').replace('column', 'col')}`,
  justifyContent: (value) => `justify-${value}`,
  alignItems: (value) => `items-${value}`,
  margin: (value) => `m-${value}`,
  marginTop: (value) => `mt-${value}`,
  marginRight: (value) => `mr-${value}`,
  marginBottom: (value) => `mb-${value}`,
  marginLeft: (value) => `ml-${value}`,
  padding: (value) => `p-${value}`,
  paddingTop: (value) => `pt-${value}`,
  paddingRight: (value) => `pr-${value}`,
  paddingBottom: (value) => `pb-${value}`,
  paddingLeft: (value) => `pl-${value}`,
  width: (value) => `w-${value}`,
  height: (value) => `h-${value}`,
  backgroundColor: (value) => `bg-${value}`,
  color: (value) => `text-${value}`,
  fontSize: (value) => `text-${value.replace('px', '')}`,
  fontWeight: (value) => `font-${value}`,
  border: (value) => `border-${value}`,
  borderWidth: (value) => `border-${value}`,
  borderColor: (value) => `border-${value}`,
  borderRadius: (value) => `rounded-${value.replace('px', '')}`,
  textAlign: (value) => `text-${value}`,
  position: (value) => `absolute-${value === 'absolute' ? '' : 'relative'}`,
  top: (value) => `top-${value}`,
  right: (value) => `right-${value}`,
  bottom: (value) => `bottom-${value}`,
  left: (value) => `left-${value}`,
  zIndex: (value) => `z-${value}`,
  opacity: (value) => `opacity-${value * 100}`,
  overflow: (value) => `overflow-${value}`,
  boxShadow: (value) => `shadow-${value}`,
  cursor: (value) => `cursor-${value}`,
  transition: (value) => `transition-${value}`,
  transform: (value) => `transform-${value}`,
  userSelect: (value) => `select-${value}`,
  pointerEvents: (value) => `pointer-events-${value}`,
  textDecoration: (value) => `underline-${value === 'underline' ? '' : 'none'}`,
  lineHeight: (value) => `leading-${value.replace('px', '')}`,
  letterSpacing: (value) => `tracking-${value.replace('px', '')}`,
  whiteSpace: (value) => `whitespace-${value}`,
  visibility: (value) => `visible-${value === 'visible' ? '' : 'hidden'}`,
  flex: (value) => `flex-${value}`,
  flexGrow: (value) => `flex-grow-${value}`,
  flexShrink: (value) => `flex-shrink-${value}`,
  flexBasis: (value) => `flex-basis-${value}`,
  flexWrap: (value) => `flex-wrap-${value}`,
  flexFlow: (value) => `flex-flow-${value}`,
  alignContent: (value) => `content-${value}`,
  alignSelf: (value) => `self-${value}`,
  placeItems: (value) => `place-items-${value}`,
  placeContent: (value) => `place-content-${value}`,
  placeSelf: (value) => `place-self-${value}`,
  gridTemplateColumns: (value) => `grid-cols-${value}`,
  gridTemplateRows: (value) => `grid-rows-${value}`,
  gridAutoColumns: (value) => `auto-cols-${value}`,
  gridAutoRows: (value) => `auto-rows-${value}`,
  gridAutoFlow: (value) => `grid-flow-${value}`,
  gridColumn: (value) => `col-start-${value.split(' ')[0]} col-end-${value.split(' ')[1]}`,
  gridRow: (value) => `row-start-${value.split(' ')[0]} row-end-${value.split(' ')[1]}`,
  gridColumnStart: (value) => `col-start-${value}`,
  gridColumnEnd: (value) => `col-end-${value}`,
  gridRowStart: (value) => `row-start-${value}`,
  gridRowEnd: (value) => `row-end-${value}`,
  gap: (value) => `gap-${value}`,
  rowGap: (value) => `gap-y-${value}`,
  columnGap: (value) => `gap-x-${value}`,
  gridArea: (value) => `area-${value}`,
  justifySelf: (value) => `justify-self-${value}`,
  justifyItems: (value) => `justify-items-${value}`,
  overflowX: (value) => `overflow-x-${value}`,
  overflowY: (value) => `overflow-y-${value}`,
  textTransform: (value) => `uppercase-${value === 'uppercase' ? '' : 'none'}`,
  textOverflow: (value) => `truncate-${value === 'ellipsis' ? '' : 'none'}`,
  wordBreak: (value) => `break-${value}`,
  lineClamp: (value) => `line-clamp-${value}`,
  textIndent: (value) => `indent-${value.replace('px', '')}`,
  listStyleType: (value) => `list-${value}`,
  listStylePosition: (value) => `list-inside-${value === 'inside' ? '' : 'outside'}`,
  listStyleImage: (value) => `list-image-${value}`,
  resize: (value) => `resize-${value}`,
  scrollBehavior: (value) => `scroll-${value}`,
  scrollMargin: (value) => `scroll-m-${value}`,
  scrollPadding: (value) => `scroll-p-${value}`,
  scrollSnapType: (value) => `snap-${value}`,
  scrollSnapAlign: (value) => `snap-align-${value}`,
  scrollSnapStop: (value) => `snap-stop-${value}`,
  touchAction: (value) => `touch-${value}`,
  willChange: (value) => `will-change-${value}`,
  contentVisibility: (value) => `content-${value}`,
  outline: (value) => `outline-${value}`,
  outlineColor: (value) => `outline-${value}`,
  outlineOffset: (value) => `outline-offset-${value.replace('px', '')}`,
  outlineStyle: (value) => `outline-${value}`,
  outlineWidth: (value) => `outline-${value}`,
  boxSizing: (value) => `box-${value}`,
  appearance: (value) => `appearance-${value}`,
  backfaceVisibility: (value) => `backface-${value}`,
};

const tailwindToStyle = {
  'flex-1': 'display: flex',
  'flex-none': 'display: none',
  'flex-row': 'flexDirection: row',
  'flex-col': 'flexDirection: column',
  'justify-center': 'justifyContent: center',
  'items-center': 'alignItems: center',
  'm-10': 'margin: 10px',
  'mt-10': 'marginTop: 10px',
  'mr-10': 'marginRight: 10px',
  'mb-10': 'marginBottom: 10px',
  'ml-10': 'marginLeft: 10px',
  'p-20': 'padding: 20px',
  'pt-20': 'paddingTop: 20px',
  'pr-20': 'paddingRight: 20px',
  'pb-20': 'paddingBottom: 20px',
  'pl-20': 'paddingLeft: 20px',
  'w-full': 'width: 100%',
  'h-50': 'height: 50px',
  'bg-blue': 'backgroundColor: blue',
  'text-white': 'color: white',
  'text-16': 'fontSize: 16px',
  'font-bold': 'fontWeight: bold',
  'rounded-5': 'borderRadius: 5px',
  'shadow-md': 'boxShadow: md',
  'cursor-pointer': 'cursor: pointer',
  'transition-all-0.3s-ease-in-out': 'transition: all 0.3s ease-in-out',
  'transform-scale-1.1': 'transform: scale(1.1)',
  'select-none': 'userSelect: none',
  'pointer-events-auto': 'pointerEvents: auto',
  underline: 'textDecoration: underline',
  'leading-1.5': 'lineHeight: 1.5',
  'tracking-0.1': 'letterSpacing: 0.1em',
  'whitespace-nowrap': 'whiteSpace: nowrap',
  visible: 'visibility: visible',
  hidden: 'visibility: hidden',
  'outline-none': 'outline: none',
  'box-border': 'boxSizing: border-box',
  'appearance-none': 'appearance: none',
  'backface-hidden': 'backfaceVisibility: hidden',
};

function inlineStyleToTailwindClassNames(style) {
  const tailwindClasses = [];

  for (const [key, value] of Object.entries(style)) {
    if (styleToTailwind[key]) {
      tailwindClasses.push(styleToTailwind[key](value));
    } else {
      console.warn(`No Tailwind CSS class found for style property: ${key}`);
    }
  }

  return tailwindClasses;
}

function tailwindClassNamesToInlineStyle(classNames) {
  const style = {};

  for (const className of classNames) {
    for (const [tailwindClass, inlineStyle] of Object.entries(tailwindToStyle)) {
      if (className.startsWith(tailwindClass)) {
        const [property, value] = inlineStyle.split(':');
        style[property.trim()] = value.trim();
        break;
      }
    }
  }

  return style;
}

// 示例用法
const inlineStyle = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  margin: '10px',
  padding: '20px',
  width: '100%',
  height: '50px',
  backgroundColor: 'blue',
  color: 'white',
  fontSize: '16px',
  fontWeight: 'bold',
  borderRadius: '5px',
  boxShadow: 'md',
  cursor: 'pointer',
  transition: 'all 0.3s ease-in-out',
  transform: 'scale(1.1)',
  userSelect: 'none',
  pointerEvents: 'auto',
  textDecoration: 'underline',
  lineHeight: '1.5',
  letterSpacing: '0.1em',
  whiteSpace: 'nowrap',
  visibility: 'visible',
  outline: 'none',
  boxSizing: 'border-box',
  appearance: 'none',
  backfaceVisibility: 'hidden',
};

const tailwindClasses = inlineStyleToTailwindClassNames(inlineStyle);
console.log('Tailwind Classes:', tailwindClasses);

const convertedStyle = tailwindClassNamesToInlineStyle(tailwindClasses);
console.log('Converted Inline Style:', convertedStyle);
